<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>别踩白块儿</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 50px auto 0 auto;
            width: 400px;
            height: auto;
            border: solid 1px #222;
        }

        #cont {
            width: 400px;
            height: 600px;
            position: relative;
            overflow: hidden;
        }

        #go {
            width: 100%;
            height: 600px;
            position: absolute;
            top: 0;
            font: 700 60px '微软雅黑';
            text-align: center;
            z-index: 99;
        }

        #go span {
            cursor: pointer;
            background-color: #fff;
            border-bottom: solid 1px #222;
        }

        #main {
            width: 400px;
            height: 600px;
            position: relative;
            top: -150px;
        }

        .row {
            width: 400px;
            height: 150px;
        }

        .row div {
            width: 99px;
            height: 149px;
            border: solid 1px #222;
            float: left;
            border-top-width: 0;
            border-left-width: 0;
            cursor: pointer;
        }

        #count {
            border-top: solid 1px #222;
            width: 400px;
            height: 50px;
            font: 700 36px/50px '微软雅黑';
            text-align: center;
        }

        #bgm {
            width: 400px;
            height: 50px;
            margin-top: -50px;
            position: absolute;
        }

        h3 {
            text-align: center
        }
    </style>
</head>
<body>
<h3>只要不是白块，一个个点吧</h3>
<div class="box">

    <!-- 布局 -->
    <audio src="http://jq22.qiniudn.com/m_02.mp3" id="bgm" controls loop></audio>
    <div id="cont">
        <div id="go">
            <span>开始游戏</span>
        </div>
        <div id="main"></div>
    </div>
    <div id="count"></div>
</div>
</body>
<script>
    //得当前样式
    function getStyle(obj, arrt) {
        //兼容IE
        return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj, null)[arrt];
    }

    var main = document.getElementById('main');
    var go = document.getElementById('go');
    var count = document.getElementById('count');
    var cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E'];


    //动态创建div
    function cDiv(classname) {
        //创建div
        var oDiv = document.createElement('div');
        //随机值
        var index = Math.floor(Math.random() * 4);
        //行 添加相应的class类
        oDiv.className = classname;
        //创建行之后再动态创建4个小div并添加到行里面
        for (var j = 0; j < 4; j++) {
            var iDiv = document.createElement('div');
            oDiv.appendChild(iDiv);
        }
        //然后把行添加到main里面
        //判断需要添加的位置
        if (main.children.length == 0) {
            main.appendChild(oDiv);
        } else {
            main.insertBefore(oDiv, main.children[0]);
        }
        //随机给行里面的某一个div添加背景色
        oDiv.children[index].style.backgroundColor = cols[index];
        //标记颜色盒子
        oDiv.children[index].className = "i";
    }


    //移动div
    function move(obj) {
        //关闭上一个定时器
        clearInterval(obj.timer);
        //默认速度与计分
        var speed = 5, num = 0;
        //定时器管理与开启定时器
        obj.timer = setInterval(function () {
            //速度
            var step = parseInt(getStyle(obj, 'top')) + speed;
            //移动盒子
            obj.style.top = step + 'px';
            //判断并创建新的盒子
            if (parseInt(getStyle(obj, 'top')) >= 0) {
                cDiv('row');
                obj.style.top = -150 + 'px';
            }
            //删除边界外的盒子
            if (obj.children.length == 6) {
                //删除前，如果有盒子没有点击则结束游戏
                for (var i = 0; i < 4; i++) {
                    if (obj.children[obj.children.length - 1].children[i].className == 'i') {
                        //游戏结束
                        obj.style.top = '-150px';
                        count.innerHTML = '游戏结束,最高得分: ' + num;
                        //关闭定时器
                        clearInterval(obj.timer);
                        //显示开始游戏
                        go.children[0].innerHTML = '重新开始';
                        go.style.display = "block";
                    }
                }
                obj.removeChild(obj.children[obj.children.length - 1]);
            }

            //点击与计分
            obj.onmousedown = function (event) {
                //点击的不是白盒子
                // 兼容IE
                event = event || window.event;
                if ((event.target ? event.target : event.srcElement).className == 'i') {
                    //点击后的盒子颜色
                    (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";
                    //清除盒子标记
                    (event.target ? event.target : event.srcElement).className = '';
                    //计分
                    num++;
                    //显示得分
                    count.innerHTML = '当前得分: ' + num;
                    bgm.play();
                }
                else {
                    //游戏结束
                    obj.style.top = 0;
                    count.innerHTML = '游戏结束,最高得分: ' + num;
                    //关闭定时器
                    clearInterval(obj.timer);
                    //显示开始游戏
                    go.children[0].innerHTML = '重新开始';
                    go.style.display = "block";
                }
                //盒子加速
                if (num % 10 == 0) {
                    speed++;
                }
            }
            //松开触发停止
            obj.onmouseup = function (event) {
                bgm.pause();
            }
        }, 20)
    }


    //开始游戏
    go.children[0].onclick = function () {
        //开始前判断main里面是否有盒子，有则全部删除
        if (main.children.length) {
            //暴力清楚main里面所有盒子
            main.innerHTML = '';
        }
        //清空计分
        count.innerHTML = '游戏开始';
        //隐藏开始盒子
        this.parentNode.style.display = "none";
        //调用定时器
        move(main);
    }
</script>
</html>